<template>
  <view class="search">
    <music-head :show="true" title="搜索" color="black" :iconBlack="true"/>
    <!-- 搜索框 -->
    <view class="search-content">
      <text class="search-icon iconfont icon-Magnifier"></text>
      <input type="text" placeholder="搜索歌曲" v-model="words" @confirm="handleToHistory(words)" @input="handleToInput"/>
      <text class="search-close iconfont icon-guanbi" v-show="words.length != 0" @tap="handleToEmpty"></text>
    </view>
    <!-- /搜索框 -->
    <view class="container search-container" :class="{ 'search-searh-box' : searchType == 2 | searchType == 3 }">
      <scroll-view scroll-y="true">
        <block v-if="searchType == 1">
          <!-- 历史记录 -->
          <view class="search-history" v-show="searchHistory.length > 0">
            <view class="history-title">历史记录 <text class="iconfont icon-lajitong" @tap="handleToClear"></text></view>
            <view class="history-content">
              <text
                class="history-item"
                v-for="(item, index) in searchHistory"
                :key="index"
                @tap="handleToWord(item)"
              >{{ item }}</text>
            </view>
          </view>
          <!-- /历史记录 -->
          <!-- 热搜榜 -->
          <view class="hot-history">
            <view class="hot-title">热搜榜</view>
            <view class="hot-content">
              <view
                class="hot-history-item"
                v-for="(hot, index) in hotSearch"
                :key="index"
                @tap="handleToWord(hot.searchWord)"
              >
                <view class="hot-item-order">{{ index + 1 }}</view>
                <view class="hot-item-info">
                  <view class="hot-item-name">
                    <text>{{ hot.searchWord }}</text>
                    <image :src="hot.iconUrl" :class="hot.iconUrl == iconTop ? 'icon-top' : ''"></image>
                  </view>
                  <view class="hot-item-desc">{{ hot.content }}</view>
                </view>
                <view class="hot-item-own">3380810</view>
              </view>
            </view>
          </view>
          <!-- /热搜榜 -->
        </block>
        
        <!-- 搜索列表 -->
        <block v-else-if="searchType == 2">
          <view class="search-result">
            <view
              class="search-result-item"
              v-for="(item, index) in keyWord"
              :key="index"
              @tap="handleToDetail(item.id)"
            >
              <view class="search-result-info">
                <view class="search-result-name">{{ item.name }}</view>
                <view class="search-result-dec">{{ item.artists[0].name }} - {{ item.album.name }}</view>
              </view>
              <text class="iconfont icon-24gl-playCircle search-list-play"></text>
            </view>
          </view>  
        </block>
        <!-- /搜索列表 -->
        
        <!-- 搜索提示 -->
        <block v-else-if="searchType == 3">
          <view class="search-hint">
            <view class="search-hint-head">搜索“{{ words }}”</view>
            <view
              class="search-hint-item"
              v-for="(item, index) in searchSuggests"
              :key="index"
              @tap="getSearchList(item.keyword)"
            >
              <text class="iconfont icon-Magnifier"></text>
              <text class="search-hint-name">{{ item.keyword }}</text>
            </view>
          </view>
        </block>
        <!-- /搜索提示 -->
      </scroll-view>
    </view>  
  </view>
</template>

<script>
  import musicHead from '@/components/musicHead/musicHead.vue'
  import { getHotSearch, searchKeyWord, searchSuggest } from '@/common/api.js'
  export default {
    name: 'SearchIndex',
    data () {
      return {
        iconTop: 'https://p1.music.126.net/PtgUJbcvDAY0HKWpmOB2HA==/109951163967988470.png',
        words: '', // 搜索的关键字
        hotSearch: [], // 热搜榜
        searchHistory: [], // 存放历史记录
        searchType: 1,
        searchList: [],
        keyWord: [],
        searchSuggests: []
      }
    },
    components: {
      musicHead
    },
    onLoad () {
      this.loadHotSearch()
      /**
       * uni-app中提供的获取本地存储数据
       * 类似于window.localStorage.getItem('search-history')
       */
      uni.getStorage({
          key: 'search-history',
          success: (res) => {
              this.searchHistory = res.data
          }
      })
    },
    methods: {
      // 初始化加载页面数据
      loadHotSearch () {
        getHotSearch().then(res => {
          if (res.data.code === 200) {
            this.hotSearch = res.data.data
          }
        })
      },
      
      // 点击x清空搜索框
      handleToEmpty () {
        this.words = ''
        this.searchType = 1
      },
      
      // 点击热搜榜的每一项，让搜索框内的文字与被点击的项的标题一致
      handleToWord (word) {
        this.words = word
        this.getSearchList(word)
      },
      
      // 历史记录
      handleToHistory (history) {
        if (history.length != 0) {
          this.searchHistory.unshift(history)
          this.searchHistory = [...new Set(this.searchHistory)] // 数组去重
          // 当搜索历史记录最多为10个，当超过10个时，去掉最后一个
          if (this.searchHistory.length > 10) {
            this.searchHistory.length = 10
          }
          /**
           * uni-app中提供的本地存储功能
           * 类似于window.localStorage.setItem('search-history', this.searchHistory)
           */
          uni.setStorage({
            key: 'search-history',
            data: this.searchHistory
          })
          
          // 当点击回车触发搜索列表
          this.getSearchList(history)
        }
      },
      
      // 点击垃圾箱，清空本地存储中的内容和searchHistory的内容
      handleToClear () {
        uni.removeStorage({
            key: 'search-history',
            success: (res) => {
                this.searchHistory = []
            }
        })
      },
      
      // 搜索结果
      getSearchList (history) {
        this.searchType = 2
        searchKeyWord(history).then(res => {
          if (res.data.code === 200) {
            this.keyWord = res.data.result.songs
          }
        })
      },
      
      // 点击搜索结果跳转到详情页
      handleToDetail (songId) {
        uni.navigateTo({
          url: '/pages/detail/detail?id=' + songId
        })
      },
      
      // 输入框内容变化时触发
      handleToInput (e) {
        const word = e.detail.value
        if (word.length != 0) {
          console.log(e.target.value)
          this.searchType = 3
          searchSuggest(word).then(res => {
            this.searchSuggests = res.data.result.allMatch
          })
        } else {
          this.searchType = 1
        }
      }
      
      // 点击搜索的内容时，搜索框中的内容变为点击的内容
      // handleToClick (name) {
      //   this.getSearchList(name)
      // }
    }
  }
</script>

<style scoped>
  /* 搜索框 */
  .search-content {
    display: flex;
    align-items: center;
    width: 686upx;
    height: 72upx;
    margin: 16upx 32upx;
    background-color: #f8f8f8;
    border-radius: 36upx;
  }
  .search-content text.search-icon {
    font-size: 30upx;
    color: #bdbdbd;
    margin: 0 24upx 0 26upx;
  }
  .search-content input {
    width: 600upx;
    height: 72upx;
    font-size: 26upx;
    color: #000;
  }
  .search-content .search-close {
    margin-right: 20upx;
    color: #666;
    font-size: 30upx;
  }
  /* 搜索框 */
  .search-container {
    padding: 10upx 32upx 0;
    box-sizing: border-box;
  }
  .search-searh-box {
    border-top: 1upx solid #e6e6e6;
  }
  /* 历史记录 */
  .search-history {
    margin-bottom: 44upx;
  }
  .history-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100upx;
    font-size: 26upx;
    color: #333;
    font-weight: 600;
  }
  .history-title text {
    color: #b2b2b2;
  }
  .history-content {}
  .history-item {
    display: inline-block;
    color: #333;
    font-size: 24upx;
    background-color: #f8f8f8;
    border-radius: 31upx;
    margin-right: 18upx;
    padding: 18upx 24upx;
    margin-bottom: 20upx;
  }
  /* 历史记录 */
  /* 热搜榜 */
  .hot-history {}
  .hot-title {
    height: 80upx;
    line-height: 80upx;
    color: #333;
    font-size: 26upx;
    font-weight: 600;
  }
  .hot-content {}
  .hot-history-item {
    display: flex;
    justify-content: space-between;
    height: 130upx;
  }
  .hot-item-order {
    width: 70upx;
    height: 130upx;
    padding: 30upx 0 0 10upx;
    box-sizing: border-box;
    color: #999;
    font-size: 24upx;
    font-weight: 600;
  }
  .hot-history-item:nth-child(-n+3) view.hot-item-order {
    color: #ff3a3a;
  }
  .hot-item-info {
    width: 520upx;
  }
  .hot-item-info .hot-item-name {
    display: flex;
    align-items: center;
    height: 46upx;
  }
  .hot-item-name text {
    font-size: 30upx;
    color: #333;
    font-weight: 600;
    max-width: 400upx;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .hot-item-name image {
    margin-left: 10upx;
    width: 52upx;
    height: 18upx;
  }
  .hot-item-name image.icon-top {
    width: 20upx;
    height: 24upx;
  }
  .hot-item-desc {
    width: 500upx;
    height: 34upx;
    line-height: 34upx;
    font-size: 22upx;
    color: #999;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .hot-item-own {
    padding-top: 32upx;
    color: #ccc;
    font-size: 18upx;
  }
  /* /热搜榜 */
  /* 搜索列表 */
  .search-result {}
  .search-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 124upx;
    border-bottom: 1upx solid #e6e6e6;
    box-sizing: border-box;
  }
  .search-result-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 560upx;
    height: 124upx;
  }
  .search-result-name {
    font-size: 28upx;
    color: #507daf;
  }
  .search-result-dec {
    font-size: 20upx;
  }
  .search-result-play {
    font-size: 50upx;
    color: #ccc;
  }
  /* /搜索列表 */
  /* 搜索提示 */
  .search-hint {}
  .search-hint-head {
    display: flex;
    align-items: center;
    height: 104upx;
    color: #507daf;
    font-size: 26upx;
  }
  .search-hint-item {
    display: flex;
    align-items: center;
    height: 104upx;
    color: #666;
  }
  .search-hint-item text.iconfont {
    color: #c2c2c2;
    font-size: 32upx;
    margin-right: 20upx;
  }
  .search-hint-item text.search-hint-name {
    font-size: 26upx;
  }
  /* /搜索提示 */
</style>
